<script setup>


import {ref} from "vue";

const props = defineProps(["params"])
const addEmptyHeaders = () => {
  if (!props.params.headers) {
    props.params.headers = [];
  }
  props.params.headers.push({
    headerName: null,
    headerValue: null,
    requiredFlag: false
  });
}


const headerColumns = ref([
  {
    title: 'key',
    slot: 'key'
  },
  {
    title: 'value',
    slot: 'value'
  },
  {
    title: 'requiredFlag',
    slot: 'requiredFlag'
  },
  {
    title: 'Action',
    slot: 'action',
    width: 150,
    align: 'center'
  }
]);



const removeHeaders = (index) => {
  props.params.headers.splice(index, 1);
}

const headerNameChange = (row, index) => {
  props.params.headers[index].headerName = row.headerName;
}
const headerValueChange = (row, index) => {
  props.params.headers[index].headerValue = row.headerValue;
}
const requiredFlagChange = (row, index) => {
  props.params.headers[index].requiredFlag = row.requiredFlag;
}

</script>

<template>

  <el-row justify="start" style="margin-top: 10px">
    <el-col :span="23">

    </el-col>
    <el-col :span="1">
      <el-button @click="addEmptyHeaders">新增</el-button>
    </el-col>
  </el-row>
  <el-row justify="start" style="margin-top: 10px">
    <el-col :span="24">
      <Table border :columns="headerColumns" :data="props.params.headers">
        <template #key="{ row,index }">
          <el-input v-model="row.headerName" :on-change="headerNameChange(row,index)"
                    placeholder="请输入key"></el-input>
        </template>
        <template #value="{ row,index }">
          <el-input v-model="row.headerValue" :on-change="headerValueChange(row,index)"
                    placeholder="请输入Value"></el-input>
        </template>
        <template #requiredFlag="{ row,index }">
          <el-checkbox v-model="row.requiredFlag" :on-change="requiredFlagChange(row,index)" label="是否必须"
                       size="large"/>
        </template>
        <template #action="{ row, index }">
          <!--                <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button>-->
          <Button type="error" size="small" @click="removeHeaders(index)">删除</Button>
        </template>
      </Table>
    </el-col>

  </el-row>
</template>

<style scoped>

</style>